<template>
	<view class="bg-white radius-lg margin-tb padding" :class="theme">
		<view class="text-lg text-bold padding-bottom-sm solid-bottom">
			<text class="cuIcon-titles" :class="theme == 'fs'?'color-blue':'color-green'"></text>
			<text class="text-black">监控信息</text>
		</view>

		<view class="step-box flex align-center">
			<view class="step-item text-center">
				<!-- <view class="step-name color-blue">
					发布人
				</view> -->
				<view class="step-icon">
					1
				</view>
				<view class="step-bt">
					<view class="text-black">
						{{fisrtData.statusName}}
					</view>
					<view class="text-grey">
						{{fisrtData.createTime}}
					</view>
				</view>
			</view>
			<block v-for="(item, index) in monitorData" :key="index">
				<view class="step-line " :class="{'bd-blue': item.step == 'pre', 'bd-gray': item.step == 'next', 'bd-cur': item.step == 'cur'}"></view>
				<view class="step-item text-center" :class="{'current-step': item.step == 'cur', 'next-step': item.step == 'next'}">
					<view class="step-name color-blue" v-if="item.step == 'cur'">
						<image class="prc-img" :src="`${$hd.baseUrl}/images/icon-process.png`" mode="aspectFit"></image>
					</view>
					<view class="step-icon">
						{{index+2}}
					</view>
					<view class="step-bt">
						<view class="text-black">
							{{item.statusName}}
						</view>
						<view class="text-grey" >
							{{item.createTime || ''}}
						</view>
					</view>
				</view>
			</block>
			<!-- <view class="step-line bd-blue"></view>

			<view class="step-item text-center current-step">
				<view class="step-name color-blue ">
					<image class="prc-img" src="@/static/icon-process.png" mode="aspectFit"></image>
				</view>
				<view class="step-icon">
					3
				</view>
				<view class="step-bt">
					<view class="">
						等待签到
					</view>
				</view>
			</view>

			<view class="step-line bd-gray"></view>

			<view class="step-item text-center next-step">
				<view class="step-icon">
					4
				</view>
				<view class="step-bt">
					<view class="">
						等待作业
					</view>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			fisrtData: {
				type: Object,
				default: () => ({})
			},
			monitorData: {
				type: Array,
				default: () => ([])
			}
		},
		computed: {
			...mapGetters(['theme']),
			}
	}
</script>

<style scoped lang="scss">
	.step-box {
		padding-top: 80rpx;
		padding-bottom: 120rpx;
		width: 100%;
		overflow-x: auto;
	}

	.step-item {
		position: relative;
		min-width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;



		.step-icon {
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			border-radius: 50%;
			color: #fff;
			background: #006BFE;
			text-align: center;
			border: 8rpx solid #CFE3FF;
			box-sizing: content-box;
		}
		
		.step-name {
			position: absolute;
			width: 100%;
			text-align: center;
			top: -46rpx;
			font-size: 26rpx;
			font-weight: 600;
		}


		.step-bt {
			position: absolute;
			// bottom: -110rpx;
			top: 70rpx;
			width: 100%;
			text-align: center;
		}
	}

	.current-step {
		.step-name {
			top: -60rpx;
		}

		// .step-icon {
		// 	background: #83DA11;
		// 	border-color: #E9F8D5;
		// }

		.step-bt {
			bottom: -48rpx;
			color: #83DA11;
		}
	}
	
	.fs {
		.current-step {
			.step-icon {
				background: #83DA11;
				border-color: #E9F8D5;
			}
		}
	}
	
	.farmer {
		.step-icon {
			background: #0BCA89;
			border-color: #D0F4E7;
		}
		
		.current-step {
			.step-icon {
				background: #83DA11;
				border-color: #E4F6CC;
			}
		}
		
		.bd-blue {
			border-color: #0BCA89;
		}
	}

	.next-step {
		.step-name {
			top: -60rpx;
		}

		.step-icon {
			background: #A7A7B5;
			border-color: #EEEEF0;
		}

		.step-bt {
			bottom: -48rpx;
			color: #A7A7B5;
		}
	}

	.step-line {
		border-top: 2px solid;
		min-width: 30px;
	}

	.bd-blue {
		border-color: #006BFE;
	}

	.bd-gray {
		border-color: #A7A7B5;
	}
	
	.bd-cur {
		border-color: #83DA11;
	}

	.prc-img {
		width: 50rpx;
		height: 50rpx;
	}
</style>